import './index.css';
import { useParams } from "react-router-dom";
import { useState, useEffect } from 'react';
import PrizeListPopup from '../../components/popups/prizeListPopup/prizeListPopup';
import RulePopup from "../../components/popups/rulePopup/rulePopup";
import GainPopup from "../../components/popups/gainPopup/gainPopup";
import emitter from '../../utils/event';
import LotteryGrid from '../../components/lotteryGrid/lotteryGrid';
import axios from 'axios';

function Lottery() {
    const [stonecoin, setStoneCoin] = useState(1000);
    const [signState, setSignState] = useState("签到");
    const [prizeList, setPrizeList] = useState([]);
    const [prizePool, setPrizePool] = useState([]);
    let { user } = useParams();
    const getStoneCoinFromServer = ()=>{
        axios.get(`/V1/stonecoin?user=${user}`)
        .then((res)=>{
            setStoneCoin(res.data.data.stonecoin);
        })
        .catch((res)=>{
            console.error("矿石获取失败")
        })
    }

    const getPrizePoolFromServer = () => {
        axios.get(`/V1/prize/pool?user=${user}`)
            .then((res) => {
                if (res.data.code === 200) {
                    setPrizePool(res.data.data);
                }
            })
            .catch((res)=>{
                console.error("奖池获取失败")
            });
    }

    const getSigninState = () => {
      axios.get(`/V1/can-signin?user=${user}`)
      .then((res) => {
        if (res.data.code === 201) {
          setSignState("已签到");
        }
      })
      .catch((res) => {
        console.error("无法获取签到状态");
      })
    }

    useEffect(() => {
        getStoneCoinFromServer();
        getPrizePoolFromServer();
        getSigninState();
        return () => {

        }
    }, []);

    const onRuleClicked = (event) => {
        // 弹出弹窗
        emitter.emit('openRulePopup', event)
    }
    const onSignClick = () => {
        if (signState === "签到") {
            axios.get(`/V1/signin?user=${user}`)
            .then((res)=>{
                if(res.data.code===200){
                    getStoneCoinFromServer();
                    setSignState("已签到");
                }
            })
            .catch((res)=>{
              console.error("签到失败");
             })
            setSignState("正在签到");
        }
    }
    const onClickViewPrise = (event) => {
        // 点击查看奖品
        axios.get(`/V1/prize/list?user=${user}`)
        .then((res)=>{
            if(res.data.code===200){
                setPrizeList(res.data.data);
                emitter.emit('openPrizeListPopup', event);
            }
        });
    }

    const handleLottery = (prizeIndex) => {
        getStoneCoinFromServer();
        emitter.emit('openPrizePopup', prizePool[prizeIndex]);
    }

    return (
        <div className="lottery">
            <div className="main">
                <div className="title">
                    {/* 幸运抽奖 */}
                    <div className="title-left">幸运抽奖</div>
                    <div className="title-right" onClick={onRuleClicked}>
                        抽奖规则
                        <i className="iconfont icon-question"></i>
                    </div>
                </div>
                <div className="box">
                    <div className="left-part">
                        <div className="header">
                            <div className="current_value">
                                当前矿石数：
                                <span className="value">{stonecoin}</span>
                            </div>
                            <span className="tosignin" onClick={onSignClick}>{signState}</span>
                        </div>
                        {
                            prizePool.length!==0 && <LotteryGrid handleLottery={handleLottery} prizePool={prizePool} stonecoin={stonecoin}
                            user={user}></LotteryGrid>
                        }
                        <div className="gain_link" onClick={onClickViewPrise}>中奖列表</div>
                    </div>
                </div>
                <div></div>
            </div>
            <GainPopup></GainPopup>
            <RulePopup></RulePopup>
            <PrizeListPopup prizeList={prizeList}></PrizeListPopup>
        </div>
    );
}

export default Lottery;
